<template>
  <view class="container">
    <view class="smart-form">
      <uni-section title="预约记录" type="line">
        <uni-list>
          <uni-list-item title="企业名称" :rightText="detail.enterpriseName" />
          <uni-list-item title="预约类型" :rightText="rangeFilter(detail.reservationType)" />
          <uni-list-item title="预约人姓名" :rightText="detail.reservationUser" />
          <uni-list-item title="预约人电话" :rightText="detail.reservationPhone" />
          <uni-list-item title="预约时间" :rightText="detail.reservationTime" />
          <uni-list-item title="附件1">
            <template v-slot:footer>
              <image class="slot-image" :src="detail.reservationFile1[0].fileUrl" mode="widthFix"></image>
            </template>
          </uni-list-item>
          <uni-list-item title="附件2">
            <template v-slot:footer>
              <image class="slot-image" :src="detail.reservationFile2[0].fileUrl" mode="widthFix"></image>
            </template>
          </uni-list-item>
        </uni-list>
      </uni-section>
      <view class="smart-form-submit smart-margin-top20 bottom-button">
        <!-- 判断渲染 -->
        <button class="smart-form-submit-btn" type="primary" @click="submit(1)">接受预约</button>
        <button class="smart-form-submit-btn" type="primary" @click="submit(2)">不接受预约</button>
        <button class="smart-form-submit-btn" type="primary" @click="submit(3)">完成来访</button>
      </view>
    </view>
  </view>
</template>

<script setup>
  import { reactive, ref } from 'vue';
  import { reservationApi } from '@/api/business/oa/reservation-api';
  import { smartSentry } from '@/lib/smart-sentry';
  import { SmartLoading, SmartToast } from '@/lib/smart-support';
  import { fileApi } from '@/api/support/file-api';
  import { FILE_FOLDER_TYPE_ENUM } from '@/constants/support/file-const';
  import _ from 'lodash';
import { onLoad } from '@dcloudio/uni-app';

  // --------------------- 表单 ---------------------
  const reservationId = ref('')
  const detail = ref({
    enterpriseName: '',
    reservationType: '',
    reservationUser: '',
    reservationPhone: '',
    reservationTime: '',
    reservationFile1: [],
    reservationFile2: []
  })

  const range = ref([
        { value: 0, text: "篮球" },
        { value: 1, text: "足球" },
        { value: 2, text: "游泳" },
  ])

  const rangeFilter = function(val) {
    const item = range.value.find(item => item.value === val)
    if (!item.text) return '未知'
    return item.text;
  }

  const loadDetail = async function() {
    SmartLoading.show();
    try {
      const res = await reservationApi.detail(reservationId.value);
      detail.value = res.data;
    } catch (error) {
      smartSentry.captureError(error);
    } finally {
      SmartLoading.hide();
    }
  }

  const submit = async function(status) {
    SmartLoading.show();
    try {
      await reservationApi.status({
        reservationId: reservationId.value,
        status
      });
      SmartToast.success('提交成功');
      loadDetail();
    } catch (error) {
      smartSentry.captureError(error);
    } finally {
      SmartLoading.hide();
    }
  }
  

  onLoad((options) => {
    reservationId.value = options.reservationId;
    loadDetail()
  })
 
</script>

<style lang="scss" scoped>
  .query-form-pop {
    height: 800rpx;
    overflow-y: scroll;
  }

  .bottom-button {
    position: fixed;
    bottom: 0;
  }
</style>
